<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Sass</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
  <link rel="stylesheet" href="../styles/article.css" />
  <link rel="shortcut icon" href="../images/logo/github.png" />
</head>

<body>
  <div class="page-header">
    <h1 class="logo"><img data-src="../images/logo/sass.png" />Sass</h1>
    <ul class="nav">
      <li>
        <a href="javascript:void(0);">官方资料</a>
        <ul class="dropdown">
          <li><a href="https://sass-lang.com/">Sass 官网</a></li>
          <li><a href="https://sasscss.com/">Sass 中文网</a></li>
          <li><a href="https://sasscss.com/getting-started/">Sass 快速入门</a></li>
          <li><a href="https://sasscss.com/sass-guidelines/">Sass 开发指南</a></li>
          <li><a href="https://sasscss.com/docs/">Sass 中文文档</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <div class="page-sidebar">
    <ul class="menu-root" id="menu"></ul>
  </div>
  <div class="page-container">
    <h1>起步</h1>
    <p>Sass 是一个 CSS 的扩展，它在 CSS 语法的基础上，引入嵌套规则、变量、混合、导入等功能，令 CSS 更加强大与优雅。</p>
    <h2>安装 Ruby</h2>
    <p>Sass 基于 Ruby 语言开发而成，安装 Sass 前需要先安装 Ruby。Mac 系统自带 Ruby，Windows 系统下载后安装<a href="https://rubyinstaller.org/downloads/"></a>。</p>
    <pre><code class="shell">$ ruby -v               # 查看是否安装成功
ruby 2.6.1p33 (2019-01-30 revision 66950) [x64-mingw32]</code></pre>
    <h2>安装 Gem</h2>
    <p>Ruby 使用 RubyGems 系统管理软件，尽可能用比较新的 RubyGems 版本。</p>
    <pre><code class="shell">$ gem update --system   # 升级 RubyGems
$ gem -v                # 查看版本
3.0.3</code></pre>
    <p>使用国内镜像<a href="https://gems.ruby-china.com/"></a> 代替官方 RubyGems。</p>
    <pre><code class="shell">$ gem sources --remove https://rubygems.org/        # 删除官方地址
$ gem sources --add https://gems.ruby-china.com/    # 添加国内镜像地址
$ gem sources -l                                    # 查看是否替换成功，确保只有 gems.ruby-china.com
*** CURRENT SOURCES ***
https://gems.ruby-china.com</code></pre>
    <h2>安装 Sass</h2>
    <p>使用 RubyGems 安装 Sass。</p>
    <pre><code class="shell">$ gem install sass      # 安装
$ gem update sass       # 升级
$ sass -v               # 查看版本
Ruby Sass 3.7.3</code></pre>
    <h2>编译 Sass</h2>
    <p>使用命令行选项编译 Sass，也可以在编辑器中安装插件自动编译。</p>
    <pre><code class="shell">$ sass sass input.scss output.css           # 编译单个文件
$ sass --watch input.scss:output.css        # 监听单个文件，并自动编译
$ sass --watch assets/sass                  # 监听整个目录
$ sass --watch assets/sass --style expanded # 指定编译格式
$ sass --help                               # 列出完整的帮助文档</code></pre>
    <h2>输出格式</h2>
    <ol>
      <li><code>nested</code> 嵌套格式，是 Sass 默认的输出格式，因为它的格式反映 CSS 样式与 HTML 文档结构。</li>
      <li><code>expanded</code> 扩展格式，每个属性和规则都独占用一行。在规则之内的属性缩进，但规则没有任何特殊的缩进。</li>
      <li><code>compact</code> 紧凑格式，占据更小的空间。每个 CSS 规则独占用一行，该行还包括定义的每个属性。</li>
      <li><code>compressed</code> 压缩格式，占用尽可能小的空间。文件的末尾会有一个换行，并且除了必要的分隔选择器之外，基本没有多余空格。它还包括其他一些小的压缩，比如选择颜色最小的表示方式。</li>
    </ol>
    <h1>基本语法</h1>
    <h2>语法格式</h2>
    <table class="table-border">
      <thead>
        <tr>
          <th>语法格式</th>
          <th>说明</th>
          <th>示例</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>Sass (Indented Sass)</th>
          <td>
            <ul>
              <li>Sass3 版本之前的语法格式，使用 <code>.sass</code> 后缀名。</li>
              <li>不使用花括号和分号，用缩进表示选择器的嵌套，用换行分隔属性。</li>
              <li>这种格式是最早的语法，被称为缩进语法。</li>
            </ul>
          </td>
          <td>
            <pre><code class="sass">.sidebar
  width: 30px
  background-color: #fff</code></pre>
          </td>
        </tr>
        <tr>
          <th>SCSS (Sassy CSS)</th>
          <td>
            <ul>
              <li>Sass3 版本之后的语法格式，使用 <code>.scss</code> 后缀名。</li>
              <li>使用花括号和分号，与 CSS 语法基本相同，仅在 CSS3 语法的基础上进行扩展，这意味着每个 CSS 样式表是一个同等的 SCSS 文件。</li>
            </ul>
          </td>
          <td>
            <pre><code class="scss">.sidebar {
  width: 30px;
  background-color: #fff;
}</code></pre>
          </td>
        </tr>
        <tr>
          <th>格式转换</th>
          <td>
            <ul class="text-nowrap">
              <li>任何一种语法的文件都可以直接 <code>@import</code> 导入到另一种语法的文件中使用。</li>
              <li>使用命令行选项 <code>sass-convert</code> 可以将一种语法转换为另一种语法。</li>
            </ul>
          </td>
          <td>
            <pre><code class="shell">$ sass-convert style.sass style.scss    # .sass 转换成 .scss
$ sass-convert style.scss style.sass    # .scss 转换成 .sass</code></pre>
          </td>
        </tr>
      </tbody>
    </table>
    <h2>编码格式</h2>
    <p>为了避免潜在的字符编码问题，强力建议在入口文件中通过 <code>@charset</code> 命令使用 <code>UTF-8</code> 编码格式。请确保该指令是文件的第一条语句，并排除其他字符编码声明。</p>
    <pre><code class="scss">@charset "utf-8";</code></pre>
    <h2>注释</h2>
    <p>Sass 支持两种格式的注释：</p>
    <ol>
      <li>标准注释：<code>/* .. */</code> CSS 格式的多行注释。</li>
      <li>静默注释：<code>//..</code> JavaScript 格式的单行注释。</li>
    </ol>
    <p>两种格式的注释在编译时有不同的处理方式：</p>
    <ul>
      <li>静默注释在编译后会被删除。</li>
      <li>标准注释在尽可能的情况下，编译后会被保留，但压缩输出模式下会被删除。</li>
      <li>标准注释的第一个字母是 <code>!</code> 时总是会被保留，即使在压缩输出模式下。</li>
      <li>标准注释出现在原生 CSS 不允许的地方，如在 CSS 属性或选择器中，Sass 无法正确编译时，这些注释会被删除。</li>
    </ul>
    <div class="row">
      <div class="col-6">
        <pre><code class="scss">body {
  color: #333;    // 静默注释：会被删除
  padding: 0;     /* 标准注释：不会被删除 */
  width: 10px;    /*!标准注释强制保留：不会被删除 */
  height: /* 标准注释位置不对：会被删除 */ 10px;
}</code></pre>
      </div>
      <div class="col-6">
        <pre><code class="css">body {
  color: #333;
  padding: 0;     /* 标准注释：不会被删除 */
  width: 10px;    /*!标准注释强制保留：不会被删除 */
  height: 10px;
}</code></pre>
      </div>
    </div>
    <h1>CSS 扩展</h1>
    <h2>嵌套规则</h2>
    <p>使用层级选择器时，在 CSS 中可能需要重复写多次父选择器，在 Sass 中可以把子选择器嵌套在父选择器的规则块内：<code>父选择器 + { 子选择器 }</code>。编译后会把父选择器通过一个空格连接到子选择器的前边，以后代选择器的形式出现。</p>
    <div class="row">
      <div class="col-6">
        <pre><code class="scss">.a {
  width: 10px;
  .b {
    height: 10px;
  }
}</code></pre>
      </div>
      <div class="col-6">
        <pre><code class="css">.a {
  width: 10px;
}
.a .b {
  height: 10px;
}</code></pre>
      </div>
    </div>
    <h2>嵌套属性</h2>
    <p>有些属性遵循相同的命名空间，比如 <code>font-</code>，可以像嵌套规则一样嵌套属性。把属性名从中划线断开，把子属性嵌套在根属性的规则块内：<code>根属性 + 冒号 + { 子属性 }</code>。编译后会把根属性通过中划线连接到子属性的前边。</p>
    <div class="row">
      <div class="col-6">
        <pre><code class="scss">.a {
  border: 1px solid #fff {
    left: 0;
  }
}</code></pre>
      </div>
      <div class="col-6">
        <pre><code class="css">.a {
  border: 1px solid #fff;
  border-left: 0;
}</code></pre>
      </div>
    </div>
    <h2>父选择器</h2>
    <p>如果要把嵌套规则应用到父选择器自身，使用 <code>&</code> 字符来表示父选择器，编译后不会像后代选择器那样进行拼接，而是 <code>&</code> 被父选择器直接替换。比如为父选择器添加伪类 <code>:hover</code>，在父选择器之前添加选择器，在父选择器之后跟随后缀。<code>&</code> 必须是选择器的第一个字符，任何 CSS 选择器可存在的地方都可以使用父选择器。</p>
    <div class="row">
      <div class="col-6">
        <pre><code class="scss">.a {
  height: 10px;
  &:hover { height: 10px; }   // 伪类
  &::before { content: ""; }  // 伪元素
  body.b & { height: 10px; }  // 添加选择器
  &-side { height: 10px; }    // 添加后缀
}</code></pre>
      </div>
      <div class="col-6">
        <pre><code class="css">.a { height: 10px; }
.a:hover { height: 10px; }
.a::before { height: 10px; }
body.b .a { height: 10px; }
.a-side { height: 10px; }</code></pre>
      </div>
    </div>
    <h2>群组选择器</h2>
    <p>如果要同时选择多个元素，使用 <code>,</code> 字符来表示群组选择器。这样可以减少工作量，但可能会使生成的 CSS 文件变大。</p>
    <div class="row">
      <div class="col-6">
        <pre><code class="scss">.a {
  .b,
  .c { height: 10px; }
}</code></pre>
      </div>
      <div class="col-6">
        <pre><code class="css">.a .b,
.a .c { height: 10px; }</code></pre>
      </div>
    </div>
    <h2>组合选择器</h2>
    <p>组合选择器必须和其它选择器配合使用，以指定浏览器仅选择某种特定上下文中的元素。</p>
    <ol>
      <li><code>></code> 子选择器。选择一个元素的直接子元素。</li>
      <li><code>+</code> 同层相邻选择器。选择一个元素后紧跟着的同层元素。</li>
      <li><code>~</code> 同层全体选择器。选择一个元素后全部的同层元素。</li>
    </ol>
    <div class="row">
      <div class="col-6">
        <pre><code class="scss">.a {
  height: 10px;
  > .b { height: 10px; }      // 直接子元素 .b
  + .c { height: 10px; }      // 紧跟着的同层元素 .c
  ~ .d { height: 10px; }      // 所有同层元素 .d
}</code></pre>
      </div>
      <div class="col-6">
        <pre><code class="css">.a { height: 10px; }
.a > .b { height: 10px; }
.a + .c { height: 10px; }
.a ~ .d { height: 10px; }</code></pre>
      </div>
    </div>
    <h1>SassScript</h1>
    <h2>变量</h2>
    <h3>使用变量</h3>
    <p>Sass 为 CSS 引入了变量，可以把反复使用的 CSS 属性值定义成变量，然后通过变量名来引用它们。</p>
    <ol>
      <li><b>标识变量：</b>使用 <code>$</code> 符号标识变量，使用全大写方式如 <code>$CSS_COLOR</code> 书写常量，使用命名空间如 <code>fa-</code> 避免命名冲突。</li>
      <li><b>声明变量：</b>变量的声明和 CSS 属性的声明类似。任何 CSS 属性值都可以用作 Sass 的变量值，也可以引用其他变量用作变量值。</li>
      <li><b>引用变量：</b>使用变量名引用变量。任何 CSS 属性值可存在的地方都可以使用变量。生成 CSS 时，变量会被它们的值所替代，声明的变量会被删除。</li>
    </ol>
    <h3>作用域</h3>
    <ul>
      <li><b>全局变量：</b>定义在规则块之外，可以全局使用。</li>
      <li><b>局部变量：</b>定义在规则块之内，只能在此规则内使用。</li>
      <li><b>优先级：</b>如果已经存在同名的全局变量，则局部变量覆盖全局变量。基本上，局部变量只会在局部范围内覆盖全局变量。</li>
    </ul>
    <h3>标识符</h3>
    <ol>
      <li><code>!global</code> 标识符：可将局部变量转变为全局变量。应该只在定义局部变量时使用，定义全局变量时省略。</li>
      <li><code>!default</code> 标识符：重复声明一个变量，只有最后一处声明有效，并且它会覆盖前边的值。使用 <code>!default</code> 标识符，设置默认变量值。它很像 CSS 属性中 <code>!important</code> 标识符的对立面，表示如果该变量已经被声明赋值了，就用它已声明的值，否则就用这个默认值。这在导入局部文件时非常实用。</li>
    </ol>
    <div class="row">
      <div class="col-6">
        <pre><code class="scss">$color: #fff;
$border-color: $color;      // 全局变量
.a {
  color: $color;
  border-color: $border;
  $color: #333;           // 局部变量，会覆盖前边的全局变量
  $color: #666 !global;   // 局部变量，会转变为全局变量
  $color: #999 !default;  // 默认变量值，不会覆盖前边的值
}</code></pre>
      </div>
      <div class="col-6">
        <pre><code class="css">.a {
  color: #fff;
  border-color: #fff;
}</code></pre>
      </div>
    </div>
    <h2>插值</h2>
    <p>使用 <code>#{..}</code> 表示插值语句，可以在注释、选择器、属性和属性值中插入变量值。</p>
    <div class="row">
      <div class="col-6">
        <pre><code class="scss">$version: "1.2.3";
/* 版本号 #{$version} */
$name: foo;
$attr: border;
$color: #fff;
p.#{$name} {
  #{$attr}-color: $color;
}</code></pre>
      </div>
      <div class="col-6">
        <pre><code class="css">/* 版本号 1.2.3 */
p.foo {
  border-color: #fff;
}</code></pre>
      </div>
    </div>
    <h2>运算</h2>
    <p>Sass 支持与 JavaScript 类似的各种运算，了解基本的数学运算即可。运算过程中会保留单位。</p>
    <ul>
      <li><code>+</code> 加法。可能会被当做连接字符串。</li>
      <li><code>-</code> 减法。两侧都保留空格，会被当做减法；前边有空格后边没有空格，会被当做负数。</li>
      <li><code>*</code> 乘法。</li>
      <li><code>/</code> 除法。使用括号、变量、表达式时会被当做除法。</li>
      <li><code>%</code> 取余。</li>
      <li><code>()</code> 圆括号。可以改变运算的优先级。</li>
    </ul>
    <h1>规则和指令</h1>
    <h2>@mixin 混合器</h2>
    <h3>使用混合器</h3>
    <p>如果有几处小样式类型，比如颜色、字体等属性值，可以使用变量统一处理。但是当样式越来越复杂时，可以使用混合器实现大段样式的重用。</p>
    <ul>
      <li><b>定义混合器：</b>使用 <code>@mixin</code> 命令定义混合器。给一大段样式赋予一个名字，然后通过引用这个名字重用这段样式。</li>
      <li><b>引用混合器：</b>使用 <code>@include</code> 命令引用混合器。生成 CSS 时，混合器中的所有样式会被提取出来放在 <code>@include</code> 被调用的地方。</li>
      <li><b>何时使用：</b>如果重复使用一段样式，或者样式本身就是一个逻辑单元，并且可以给混合器找到一个语义化的名字，就应该构造成一个优良的混合器。使用混合器的关键是简洁，如果一个混合器行数过多，那么它应该被分离成更小的块甚至是重建。</li>
    </ul>
    <div class="row">
      <div class="col-6">
        <pre><code class="scss">// 定义混合器
@mixin rounded-corners {
  -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
          border-radius: 5px;
}
// 引用混合器
notice {
  background-color: green;
  @include rounded-corners;
}</code></pre>
      </div>
      <div class="col-6">
        <pre><code class="css">.notice {
  background-color: green;
  -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
          border-radius: 5px;
}</code></pre>
      </div>
    </div>
    <h3>使用嵌套</h3>
    <p>混合器中不仅可以包含属性，也可以包含 CSS 规则、选择器、选择器中的属性。在父规则中引用混合器时，混合器中的规则最终会生成父规则中的嵌套规则。</p>
    <div class="row">
      <div class="col-6">
        <pre><code class="scss">@mixin no-bullets {
  list-style: none;
  li {
    list-style-type: none;
  }
}
ul {
  color: #fff;
  @include no-bullets;
}</code></pre>
      </div>
      <div class="col-6">
        <pre><code class="css">ul {
  color: #fff;
  list-style: none;
}
ul li {
  list-style-type: none;
}</code></pre>
      </div>
    </div>
    <h3>使用参数</h3>
    <p><code>@include</code> 给混合器传参，参数可以是 CSS 属性值或者可以给 CSS 属性值赋值的变量。<code>@import</code> 接收参数，在混合器中引用参数名给属性赋值，参数名要以 <code>$</code> 字符开头。</p>
    <div class="row">
      <div class="col-6">
        <pre><code class="scss">@mixin link-colors($hover, $visited) {
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}
a {
  @include link-colors(red, green);
}</code></pre>
      </div>
      <div class="col-6">
        <pre><code class="css">a:hover { color: red; }
a:visited { color: green; }</code></pre>
      </div>
    </div>
    <h3>参数的顺序</h3>
    <p>引用混合器时，传参顺序必须与接收顺序相同。但是通过 <code>$name: value</code> 指定每个参数的值，可以忽略传参顺序，只需要保证没有漏掉参数即可。</p>
    <pre><code class="scss">a {
  @include link-colors(
    $visited: green,
    $hover: red
  );
}</code></pre>
    <h3>参数的默认值</h3>
    <p>定义混合器时，通过 <code>$name: default-value</code> 给参数指定一个默认值，引用时就不必传入所有的参数。</p>
    <pre><code class="scss">@mixin link-colors(
  $hover: red,
  $visited: green
)
{
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}</code></pre>
    <h2>@extend 继承</h2>
    <h3>使用继承</h3>
    <p>选择器继承是说一个选择器可以继承另一个选择器定义的所有样式。</p>
    <ul>
      <li><b>工作原理：</b>使用 <code>@extend</code> 命令实现选择器继承。继承只会在编译时复制选择器，不会复制属性。</li>
      <li><b>何时使用：</b>继承应该用于维护选择器之间语义化的关系。如果两个选择器是类似的，那么最好使用 <code>@extend</code>。如果它们之间没有关系，只是具有相同的样式，那么使用 <code>@mixin</code> 会更好。跟混合器相比，继承生成的代码相对更少。继承遵从 CSS 层叠的规则，要避免继承复杂选择器，避免继承常见的父类选择器和相邻选择器。</li>
    </ul>
    <h3>如何继承</h3>
    <p>这里以 <code>.seriousError</code> 继承 <code>.error</code> 为例，来说明选择器如何继承。</p>
    <ul>
      <li><b>继承样式：</b>样式表中任何位置处为 <code>.error</code> 定义的所有样式，都会被 <code>.seriousError</code> 继承。编译时样式表中的任何一处 <code>.error</code> 都会被替换成群组选择器 <code>.error, .seriousError</code>，相关样式会同时应用到这两个选择器。以 <code>class="seriousError"</code> 修饰的元素最终的展示效果就好像是 <code>class="seriousError error"</code>。</li>
      <li><b>继承组合选择器：</b>任何跟 <code>.error</code> 有关的组合选择器样式，也会被 <code>.seriousError</code> 以组合选择器的形式继承。</li>
      <li><b>继承复杂选择器：</b>继承复杂选择器时，只会继承这个复杂选择器命中的元素所应用的样式。比如 <code>@extend h1.error</code>，只会继承 <code>h1.error</code> 的样式，不会继承 <code>h1</code> 或者 <code>.error</code> 的样式。使用复杂选择器继承其它规则时同理。</li>
    </ul>
    <div class="row">
      <div class="col-6">
        <pre><code class="scss">.seriousError {
  border-width: 3px;
  @extend .error;
}
.error {
  border: 1px red;
  a {
      color: red;
  }
}
h1.error {
  font-size: 14px;
}</code></pre>
      </div>
      <div class="col-6">
        <pre><code class="css">/* .seriousError 继承 .error 的样式 */
.seriousError {
  border-width: 3px;
}
.error,
.seriousError {
  border: 1px red;
}
/* .seriousError 继承 .error 的组合选择器样式 */
.error a,
.seriousError a {
  color: red;
}
h1.error,
h1.seriousError {
  font-size: 14px;
}</code></pre>
      </div>
    </div>
    <h2>@import 导入文件</h2>
    <h3>使用导入</h3>
    <table class="table-border">
      <thead>
        <tr>
          <th>使用导入</th>
          <th>说明</th>
          <th>示例</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><code>css@import</code></td>
          <td>
            <ul>
              <li>导入 CSS 文件。</li>
              <li>只有执行到 <code>@import</code> 时，浏览器才会下载其它 CSS 文件，导致页面加载缓慢。</li>
            </ul>
          </td>
          <td>
            <pre><code class="css">/* 导入 index.css */
@import url("index.css");</code></pre>
          </td>
        </tr>
        <tr>
          <td><code>sass@import</code></td>
          <td>
            <ul>
              <li>导入 Sass 或 SCSS 文件。</li>
              <li>被导入文件中的所有样式，在编译时会合并同一个 CSS 文件中。</li>
              <li>被导入文件中定义的任何变量和混合器都可以在主文件中使用。</li>
              <li>导入时并不需要指明被导入文件的全名，可以省略 <code>.sass</code> 或 <code>.scss</code> 文件后缀名。</li>
            </ul>
          </td>
          <td>
            <pre><code class="scss">// 导入 index.sass 或者 index.scss
@import "index";</code></pre>
          </td>
        </tr>
      </tbody>
    </table>
    <h3>局部文件</h3>
    <p>有些专门为 <code>@import</code> 命令而编写 Sass 文件，并不需要单独编译生成对应的 CSS 文件，这样的 Sass 文件称为局部文件。构建 CSS 项目时，使用局部文件可以保持整体结构的一致性并使所有设置有意义<a href="https://sasscss.com/sass-guidelines/architecture/"></a>。Sass 中有特殊的约定，以下划线开头命名局部文件，就不会编译这个文件。局部文件导入时还可以省略文件名开头的下划线。</p>
    <p>导入文件时，<code>@import</code> 命令前边的声明会被导入文件中相同的声明覆盖。如果创建一个库、框架、栅格系统甚至任何的 Sass 片段，是为了分发经验或者被其他开发者使用，那么与之配置的所有变量都应该使用 <code>!default</code> 标识符来定义，方便其他开发者重写变量。</p>
    <div class="row">
      <div class="col-6">
        <pre><code class="scss">// 导入 _index.scss
@import "index";</code></pre>
      </div>
      <div class="col-6">
        <pre><code class="scss">// 局部文件 _index.scss
.b { color: #fff!default; }</code></pre>
      </div>
    </div>
    <h3>嵌套导入</h3>
    <p>Sass 允许把 <code>@import</code> 命令写在规则块内。这样导入时，局部文件会被直接插入到该规则内导入它的地方。被导入的局部文件中定义的所有变量和混合器，也会在这个规则内生效，不会全局有效。</p>
    <pre><code class="scss">// 嵌套导入
.a { @import "theme"; }

// 等同于
.a {
  .b { color: #fff; }
}</code></pre>
    <h3>原生导入</h3>
    <p><code>sass@import</code> 命令会优先查找 Sass 文件并导入，但某些情况会使用原生的 <code>css@import</code>。</p>
    <pre><code class="scss">// 原生导入
@import "index" screen;          // 1.命令中包含媒体查询
@import "index.css";             // 2.文件的后缀名是 .css
@import "https://index.css";     // 3.文件名是 https://..
@import url("https://index.css");// 4.文件名是 url()</code></pre>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
  <script src="../scripts/article.js"></script>
</body>

</html>
